<template>
  <div class="default">
    <div class="default-item" v-for="item in list" :key="item.id" @click="handleClick(item)">
      <div class="default-item-flex">
        <div class="default-item-flex__icon">
          <img v-lazy="item.picUrl || item.coverImgUrl" />
          <span class="listen">
            <i :class="['my-icon', fufei ? 'my-icon-tipsmoney' : 'my-icon-timeout']"></i>
            {{ getPlayCount(fufei ? item.originalPrice : item.playCount) }}
          </span>
        </div>
        <div class="default-item-flex__title">
          <span>{{ fufei ? item.rcmdText : item.name }}</span>
        </div>
      </div>
    </div>
    <div class="default-placeholder" v-for="index in 3" :key="index"></div>
  </div>
</template>

<script setup>
import { useMyRouters } from '@/router';
import { getPlayCount } from '@/util';

const props = defineProps({
  // 数据列表
  list: {
    type: Array,
    default: []
  },
  fufei: {
    type: Boolean,
    default: false
  },
  detailPath: {
    type: String,
    default: '/recomdetail'
  }
});

const { router } = useMyRouters();

// 跳转到详情页
function handleClick(item) {
  router.push({
    path: props.detailPath,
    query: {
      id: item.id || item.creativeId
    }
  });
}
</script>

<style lang="less" scoped>
.default {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .default-item {
    width: 110px;
    margin-bottom: 5px;

    .default-item-flex {
      display: flex;
      flex-direction: column;
      align-items: center;

      .default-item-flex__icon {
        width: 110px;
        height: 110px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .listen {
          display: flex;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.384);
          padding: 0 8px 0 3px;
          border-radius: 10px;
          position: absolute;
          left: 5px;
          bottom: 5px;
          color: #fff;
          i {
            font-size: 23px;
          }
        }
      }
      .default-item-flex__title {
        padding-top: 5px;
        overflow: hidden;
        span {
          white-space: normal;
          line-height: 18px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .default-placeholder {
    width: 110px;
  }
}
</style>
